<!DOCTYPE html>

<title>Confluent Cloud "The Cube" Demo</title>

<head>

    <meta charset=UTF-8>
    <meta name=viewport content="width=device-width,initial-scale=0">

    <style>
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        body {
            max-width: 500px;
            margin: 2em auto;
            padding: 0 0.5em;
            font-size: 20px;
        }

        h1 {
            text-align: center;
        }

        .api-support {
            display: block;
        }

        .hidden {
            display: none;
        }

        .cube {
            width: 150px;
            height: 150px;
            position: relative;
            margin: 30px auto;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        .face {
            width: 150px;
            height: 150px;
            position: absolute;
            font-size: 80px;
            text-align: center;
            line-height: 150px;
            background-color: #999999;
            box-shadow: inset 0 0 20px #333333;
            opacity: 0.6;
        }

        .cube .one {
            -webkit-transform: translateZ(75px);
            transform: translateZ(75px);
        }

        .cube .two {
            -webkit-transform: rotateY(90deg) translateZ(75px);
            transform: rotateY(90deg) translateZ(75px);
        }

        .cube .three {
            -webkit-transform: rotateY(180deg) translateZ(75px);
            transform: rotateY(180deg) translateZ(75px);
        }

        .cube .four {
            -webkit-transform: rotateY(-90deg) translateZ(75px);
            transform: rotateY(-90deg) translateZ(75px);
        }

        .cube .five {
            -webkit-transform: rotateX(90deg) translateZ(75px);
            transform: rotateX(90deg) translateZ(75px);
        }

        .cube .six {
            -webkit-transform: rotateX(-90deg) translateZ(75px) rotate(0deg);
            transform: rotateX(-90deg) translateZ(75px) rotate(0deg);
        }

        .value {
            font-weight: bold;
        }

        .author {
            display: block;
            margin-top: 1em;
        }
        
    </style>


    <script>

      function checkName() {

        if (window.name == null | window.name.length == 0) {

          window.location.href = "index.html";

        }

      }
  
    </script>

</head>

<body onload="checkName()">

    <center>

    <center><img src="logo.svg" height="60%" width="60%" /></center>
    <br><br>

      <div id=cubeArea>

          <div id=cube class=cube>
              <div class="face one">1</div>
              <div class="face two">2</div>
              <div class="face three">3</div>
              <div class="face four">4</div>
              <div class="face five">5</div>
              <div class="face six">6</div>
          </div>
  
          <br>
          
          <div id=logging>
              <p><span id=eventDataLog class=value>null</span></p>
          </div>
  
      </div>

    </center>

    <script>

        var record = {};
        record.name = window.name;

        record.motion = {

            "x" : 0,
            "y" : 0,
            "z" : 0

        };

        record.speed = {

            "x" : 0,
            "y" : 0,
            "z" : 0

        };

        if (('ondeviceorientation' in window) && ('ondevicemotion' in window)) {

            window.addEventListener('deviceorientation', function (event) {

                record.motion.x = Math.round(event.beta);
                record.motion.y = Math.round(event.gamma);
                record.motion.z = Math.round(event.alpha);

                document.getElementById('cube').style.webkitTransform =
                    document.getElementById('cube').style.transform =
                    'rotateX(' + record.motion.x + 'deg) ' +
                    'rotateY(' + record.motion.y + 'deg) ' +
                    'rotateZ(' + record.motion.z + 'deg)';

                var currentState = 'X: ' + record.motion.x + '&nbsp;&nbsp;&nbsp;&nbsp;Y: ' + record.motion.y + '&nbsp;&nbsp;&nbsp;&nbsp;Z: ' + record.motion.z;
                document.getElementById('eventDataLog').innerHTML = currentState;

                publishEvent(record);

            });

            window.addEventListener('devicemotion', function (event) {

                record.speed.x = Math.round(event.acceleration.x);
                record.speed.y = Math.round(event.acceleration.y);
                record.speed.z = Math.round(event.acceleration.z);
                
                publishEvent(record);

            });

        }

        function publishEvent(record) {

            var eventData = {};
            eventData.value_schema_id = 1;

            eventData.records = [{"value" : {

                "event" : {}
                
            }}];

            eventData.records[0].value.event = record;

            var json = JSON.stringify(eventData);
            const request = new XMLHttpRequest();
            const url = "${rest_proxy_endpoint}/topics/_EVENTS";
            request.open("POST", url, true);

            request.setRequestHeader("Content-Type", "application/vnd.kafka.avro.v2+json");
            request.send(json);

        }

    </script>

</body>

</html>